<template>
	<view class="details-view">
		<view class="order-top">
			<view class="order-remind">
				<view>下单成功，坐等开吃</view>
				<view>菜品已在制作中</view>
			</view>
		</view>
		<view class="food-list">
		<view class="foot-back">
			<block v-for="(item,index) in comp_data" :key="index">
				<view class="foot-til">
					<text style="font-weight: bold;color: #090909;">第 {{comp_data.length - index}} 次下单</text>
					<text>下单成功，坐等开吃</text>
				</view>
				<block v-for="(item_data,index_goods) in item.goods_list" :key="index_goods">
					<view class="foot-deta" v-show ="index_goods < item.max">
						<view>
							<image :src="item_data.image[0].url" mode="aspectFill"></image>
						</view>
						<view class="foot-name">
							<text>{{item_data.name}}</text>
							<text>{{item_data.quantity}}{{item_data.unit}}</text>
						</view>
						<view class="foot-total">¥{{item_data.unitprice}}</view>
					</view>
				</block>
				<!-- 展示更多 大于三条数据才显示展开 -->
				<view class="expand-more" v-show="comp_data[index].goods_list.length > item.max" @click="opEn(index)">
					<text>展开全部</text>
					<image src="/static/tab/zhankai.svg"></image>
				</view>
		    </block>
			
			<!-- 总计 -->
			<view class="total-view">
				<view>共 <text style="font-weight: bold;color: #090909;">{{overall}}</text> 份</view>
				<view class="total-price">
					<text>总计</text>
					<text>¥{{other_data.sett_amount}}</text>
				</view>
			</view>
		</view>
		<!-- 订单号 -->
		<view class="foot-back order-number">
			<text>订单编号：{{other_data.order_no}}</text>
			<text>下单时间：{{other_data.order_time}}</text>
			<text>桌号名称：{{other_data.table_number}}</text>
		</view>
		<view style="height: 300rpx;"></view>
		</view>
		<!-- 加菜 -->
		<view class="add-a-dish">
			<view @click="add_Dish()">加菜</view>
		</view>

	</view>
</template>

<script>
const db = wx.cloud.database() // 微信接口
export default{
	data(){
		return {
			overall: 0,  // 总的多少份
			other_data:{}, // 订单信息
			comp_data:[],// 完整订单数据
			data_id: 3,
		}
	},
	methods:{
		async get_menu(){
			// 取出本地缓存的桌号和用餐人数
			let table_number = wx.getStorageSync('table_num') // 桌号
			try{
				console.log(table_number,'table');
				let res = await db.collection('dingdan-order').where({table_number,transac_status:"false"}).get()
				// 总的多少份
				res.data[0].menu.forEach(item=>{this.overall += item.goods_list.length})
				// 总计，订单编号。，下单时间，桌台号
				this.other_data = res.data[0]
				// 重装数据，增加max
				this.comp_data = res.data[0].menu.map((item)=>{
					return{
						backup_data:item.backup_data, // 备用字段
						goods_list:item.goods_list, // .slice(0,3) 可以用字符串截取前三项的数据
						max: 3, // 最大长度为三
					}
				})
			}catch(e){
				// 微信小程序失败弹窗
					wx.showToast({
						title: '获取失败！',
						// mask: true, // 图层透明蒙版，防止点击
						icon: 'error',
						duration: 2000
					})
				}
		},
		// 展开全部
		opEn(index){
			this.$set(this.comp_data[index],'max',this.comp_data[index].goods_list.length)
		},
		// 加菜
		add_Dish(){
			wx.reLaunch({
			  url: '/pages/home-page/page'
			})
		}
	},
	onLoad(options) {
		this.get_menu()
		console.log(options,'options')
	}
}
</script>

<style>
page{background-color: #f4f4f4;}
.details-view{position: relative;}
.order-top{
	background:linear-gradient(to bottom, #f7d45f,#f7d562,#f8d561,#f9db76, #f9de80);
	height: 300rpx;
}
.order-remind view:nth-child(1){
	font-size: 35rpx;
	font-weight: bold;
	padding-bottom: 20rpx;
}
.order-remind{
	height: 200rpx;
	padding: 50rpx 0 0 50rpx;
}
.food-list{
	position: absolute;
	top: 200rpx;
	left: 20rpx;
	right: 20rpx;
}
.foot-back{
	background-color: #fefefe;
	border-radius: 10rpx;
	padding: 0 20rpx;
	margin-bottom: 30rpx;
}
.foot-til{
	height: 100rpx;
	color: #999999;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.foot-deta image{
	display: block;
	width: 130rpx;
	height: 130rpx;
	border-radius: 10rpx;
}
.foot-deta{
	display: flex;
	justify-content: space-between;
	height: 130rpx;
	margin: 40rpx 0;
}
.foot-name{
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0 20rpx;
	font-size: 30rpx;
}
.foot-name text:nth-child(1){font-size: 31rpx !important;font-weight: bold;}
.foot-name text:nth-child(2){color: #666666;}
.foot-total{font-weight: bold;}
/* 展开更多 */
.expand-more image{
	width: 25rpx;
	height: 25rpx;
	display: block;
	padding-left: 10rpx;
}
.expand-more{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999999;
	font-size: 25rpx;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f1f1f2;
}
/* 总计 */
.total-price{
	display: flex;
	align-items: center;
	color: #333333;
	padding-left: 40rpx;
}
.total-price text:nth-child(2){
	font-size: 35rpx;
	font-weight: bold;
	padding-left: 30rpx;
	}
.total-view{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 30rpx 0;
}
.total-view view:nth-child(1){
	color: #999999;
}
/* 订单号 */
.order-number text{
	display: block;
	padding: 15rpx 0;
	font-size: 28rpx;
	color: #999999;
}
/* 加菜 */
.add-a-dish{
	background-color: #fefefe;
	height: 120rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0rpx -1.9rpx 1rpx 1rpx #f9f9f9;
	padding: 0 20rpx;
	z-index: 9;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.add-a-dish view{
	background:linear-gradient(to right,#f8da81,#f8d771,#f7d362,#f6cb4a);
	width: 200rpx;
	height: 75rpx;
	line-height: 75rpx;
	text-align: center;
	border-radius: 50rpx;
	font-weight: bold;
}
</style>
